<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { reactive, ref, onMounted } from "vue";
import { createDecalTask } from "/@/api/task";
import { getServiceList } from "/@/api/warehousing";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps } from "element-plus";
import useUploadUrl from "/@/hooks/useUploadUrl";

type Props = {
  modelValue: boolean;
};
withDefaults(defineProps<Props>(), {
  modelValue: false
});

const emit = defineEmits(["update:modelValue", "submit-success"]);
const inputHandle = val => {
  emit("update:modelValue", val);
};

const inputWidth = "250px";
const formData = reactive({
  user_name: "",
  user_nid: "",
  box_no: "", //	String箱麦
  quantity: null, //	Number数量
  service_id: "", //	Number服务id
  service_name: "", //	String服务名称
  file: "", //	String文件地址
  place_to_go: "", //	String去向
  fba_id: "", //	String
  ref_id: "", //	String
  notes: "" //	String备注
});
const serviceList = ref([]);
const imageUrl = ref("");
const role = JSON.parse(localStorage.getItem("authorized-token")).role;

onMounted(() => {
  getServiceList().then(({ data }) => {
    serviceList.value = data;
  });
});

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  formData.file = response.data;
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
};

const setServiceName = val => {
  const { name } = serviceList.value.find(item => item.id === val);
  formData.service_name = name;
};

const initForm = () => {
  formData.user_name = "";
  formData.user_name = "";
  formData.user_nid = "";
  formData.box_no = ""; //	String箱麦
  formData.quantity = null; //	Number数量
  formData.service_id = ""; //	Number服务id
  formData.service_name = ""; //	String服务名称
  formData.file = ""; //	String文件地址
  formData.place_to_go = ""; //	String去向
  formData.fba_id = ""; //	String
  formData.ref_id = ""; //	String
  formData.notes = ""; //	String备注
  inputHandle(false);
};

const submit = () => {
  if (!formData.file) {
    return ElMessage({
      type: "warning",
      message: "请上传文件"
    });
  } else {
    const obj = { ...formData };
    if (role !== "warehouse") {
      delete obj.user_name;
      delete obj.user_nid;
    }
    createDecalTask(obj).then(() => {
      ElMessage({
        type: "success",
        message: "创建成功"
      });
      initForm();
      inputHandle(false);
      emit("submit-success");
    });
  }
};
</script>

<template>
  <el-dialog
    :modelValue="modelValue"
    @update:modelValue="inputHandle"
    title="创建入库清单"
    width="40%"
  >
    <span>
      <el-form
        :inline="true"
        :model="formData"
        label-width="auto"
        label-position="left"
      >
        <template v-if="role === 'warehouse'">
          <el-form-item label="客户名称:">
            <el-input
              v-model="formData.user_name"
              :style="{ width: inputWidth }"
            />
          </el-form-item>
          <el-form-item label="客户nid:">
            <el-input
              v-model="formData.user_nid"
              :style="{ width: inputWidth }"
            />
          </el-form-item>
        </template>
        <el-form-item label="箱麦:">
          <el-input v-model="formData.box_no" :style="{ width: inputWidth }" />
        </el-form-item>
        <el-form-item label="数量:">
          <el-input-number
            v-model="formData.quantity"
            :step="1"
            :min="0"
            :style="{ width: inputWidth }"
          />
        </el-form-item>
        <el-form-item label="服务选项:">
          <el-select
            v-model="formData.service_id"
            placeholder="请选择"
            :style="{ width: inputWidth }"
            @change="setServiceName"
          >
            <el-option
              v-for="item in serviceList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="去向:">
          <el-input
            v-model="formData.place_to_go"
            :style="{ width: inputWidth }"
          />
        </el-form-item>
        <el-form-item label="FBA ID:">
          <el-input v-model="formData.fba_id" :style="{ width: inputWidth }" />
        </el-form-item>
        <el-form-item label="Ref ID:">
          <el-input v-model="formData.ref_id" :style="{ width: inputWidth }" />
        </el-form-item>
        <el-form-item label="备注:">
          <el-input v-model="formData.notes" :style="{ width: inputWidth }" />
        </el-form-item>
        <el-form-item label="贴标文件:" class="picture-form-item">
          <el-upload
            class="avatar-uploader"
            :action="useUploadUrl.uploadUrl"
            :headers="useUploadUrl.headers"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="initForm">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
:deep(.picture-form-item) {
  vertical-align: top !important;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

:deep(.avatar-uploader .el-upload) {
  width: 150px;
  height: 150px;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
